import {DetailWrapper, HasSubmittedWrapper, SubmitWrapper, Wrapper} from "./style";
import StudentHomeworkDetailNav from "@/pages/StudentHomeworkDetail/StudentHomeworkDetailNav";
import {Button, Checkbox, CheckboxProps, message, Modal, Tabs, TabsProps, Upload, UploadFile, UploadProps} from "antd";
import pin from "@/static/imgs/HomeworkDetail/回形针 (2).svg";
import upload from "@/static/imgs/HomeworkDetail/上传.svg";
import {useEffect, useState} from "react";
import {uploadFile} from "@/api/common/homeworkApi.ts";
import {getHomeworkDetail, submitHomework} from "@/api/student/homeworkApi.ts";
import {useParams} from "react-router";
import dayjs from "dayjs";


const StudentHomeworkDetail = () => {
    const {workId} = useParams()

    const [homeworkDetail, setHomeworkDetail] = useState({})
    const [hasSubmitted, setHasSubmitted] = useState(false)

    const initHomeworkDetail = () => {
        getHomeworkDetail(workId).then(res => {
            setHasSubmitted(res.data.data.isSubmit)
            setHomeworkDetail(res.data.data)
        })
    }

    useEffect(() => {
        initHomeworkDetail()
    }, [workId])

    // 作业详情
    const Detail = ({title, type, typeLabel, releaseTime, deadline, description, score, applyTime}: any) => {
        return (
            <DetailWrapper>
                <div className='header'>
                    <div className="cmp-work-list-card">
                        <span>{typeLabel}</span>
                        <div className='margin-top'>
                            <header className='flex-align'>{title}</header>
                            <div className='tags'>
                                <span className="tag">{type}</span>
                                <span
                                    className="tag">提交起止时间：{dayjs(releaseTime).format('YYYY/MM/DD HH:mm')}~{dayjs(deadline).format('YYYY/MM/DD HH:mm')}</span>
                                <span className="tag">{applyTime}</span>
                                <span className="tag-gray">{score}分</span>
                                <span className="tag-gray">查重</span>
                                <span className="tag-gray">允许超时提交</span>
                            </div>
                            <div className="homework-description">{description}</div>
                            <div className="stu-status"></div>
                            <div className="attachment_list_area">
                                <div className="left">
                                    <img
                                        src="	https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_others.png"
                                        alt=""/>
                                </div>
                                <div className="right">
                                    <div className='name'>补充练习7</div>
                                    <span className='size'>30KB</span>
                                    <button>下载</button>
                                </div>
                            </div>
                        </div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div className='main-content'>

                    <div className='bottom-component'>
                        <div className="component-main">
                            <div className="left">
                                <img src="https://assets.ketangpai.com//Public/Common/img/40/36.png" alt=""/>
                            </div>
                            <div className="right">
                                <div className="textarea">
                                    <textarea autoComplete={'off'} rows={2} placeholder={'说点什么吧'}></textarea>
                                </div>
                            </div>
                        </div>
                        <div className="component-footer">
                            <Checkbox checked onChange={onCheckBoxChange}>实名发表</Checkbox>
                            <div className='pin'>
                                <img src={pin} alt=""/>
                                <div>添加附件</div>
                            </div>
                            <Button type="primary">发表评论</Button>
                        </div>
                    </div>
                    <div className="comments">
                        <div className="title">
                            全部评论
                            <span>共0条</span>
                        </div>
                        <div className="content">
                            <div className="img-box">
                                <img src="https://www.ketangpai.com/img/img_empty.84d0931c.png" alt=""/>
                            </div>
                            暂无数据
                        </div>
                    </div>
                </div>
            </DetailWrapper>
        )
    }


    const onCheckBoxChange: CheckboxProps['onChange'] = (e) => {
        console.log(`checked = ${e.target.checked}`);
    };

    // 提交作业

    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        handleSubmit()
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const [file, setFile] = useState<UploadFile>();

    const [filePath, setFilePath] = useState('')

    const props: UploadProps = {
        maxCount: 1,
        name: 'file',
        beforeUpload(file) {
            setFile(file);
            handleUpload(file)
            return false;
        },
        fileList: file ? [file] : [],
    };

    const handleUpload = (file: UploadFile) => {
        const formData = new FormData()
        formData.append('filePath', '\\homework')
        formData.append('file', file as any)
        uploadFile(formData).then(res => {
            message.success('上传成功')
            setFilePath(res.data.data.filePath)
        }).catch(() => {
            message.error('上传失败')
        })
    }

    const handleSubmit = async () => {
        submitHomework({filePath}, workId || '').then(res => {
            message.success('提交成功')
            initHomeworkDetail()
            console.log(res.data)
        })
    }

    const SubmitHomework = ({title, type, typeLabel, releaseTime, deadline, score, applyTime}: any) => {
        return (
            <SubmitWrapper>
                <header>
                    <div className="card">
                        <div className="left">
                            <img src="https://www.ketangpai.com/images/web2x_zuoye.png" alt=""/>
                            <div className="another-name">
                                <div className="label-type">{typeLabel}</div>
                            </div>

                        </div>
                        <div className="right">
                            <div className="header">{title}</div>
                            <div className="tags">
                                <span className="tag">{type}</span>
                                <span
                                    className="tag">提交起止时间：{dayjs(releaseTime).format('YYYY/MM/DD HH:mm')}~{dayjs(deadline).format('YYYY/MM/DD HH:mm')}</span>
                                <span className="tag">{applyTime}</span>
                                <span className="tag-gray">{score}分</span>
                                <span className="tag-gray">查重</span>
                                <span className="tag-gray">允许超时提交</span>
                            </div>
                            <div className="stu-status"></div>
                        </div>
                    </div>
                    <div className="right-btn"></div>
                </header>
                <div className="divider"></div>
                <div className="submit-box">
                    <div className="header">
                        <div>提交内容</div>
                        <Button type="primary" onClick={showModal}>确认提交</Button>
                    </div>
                    <div className="upload-box">
                        <div className="title font16">作业附件</div>
                        <Upload {...props}>
                            <div className="container">
                                <p>
                                    <img src={upload} alt=""/>
                                </p>
                                <p>点击上传添加作业文件</p>
                                <p>支持各类文档、图片、代码、压缩包格式</p>
                            </div>
                        </Upload>
                        <div className="title leave-word">
                            作业留言
                            <span>选填</span>
                        </div>
                        <div className="textarea">
                            <textarea autoComplete={'false'}
                                      placeholder={'作业以附件形式提交，留言仅作备注使用哦！'}></textarea>
                        </div>
                    </div>
                </div>
            </SubmitWrapper>
        )
    }

    const HasSubmitted = ({title, type, typeLabel, releaseTime, deadline, score, gotScore, applyTime}: any) => {
        return (
            <HasSubmittedWrapper>
                <div className="card">
                    <div className="left">
                        <img src="https://www.ketangpai.com/images/web2x_zuoye.png" alt=""/>
                        <div className="another-name">
                            <div className="label-type">{typeLabel}</div>
                        </div>
                    </div>
                    <div className="right">
                        <div className="header">{title}</div>
                        <div className="tags">
                            <span className="tag">{type}</span>
                            <span
                                className="tag">提交起止时间：{dayjs(releaseTime).format('YYYY/MM/DD HH:mm')}~{dayjs(deadline).format('YYYY/MM/DD HH:mm')}</span>
                            <span className="tag">{applyTime}</span>
                            <span className="tag-gray">{score}分</span>
                            <span className="tag-gray">查重</span>
                            <span className="tag-gray">允许超时提交</span>
                        </div>
                        <div className="stu-status"></div>
                    </div>
                </div>
                <div className="right-btn"></div>
                <div className="divider"></div>
                <div className="submit-content mb24">
                    <div className="mn24 flex-between">
                        <div className="font20">提交内容</div>
                    </div>
                    <div className="content">
                        <div className="tea-comment">
                            <div className="left">
                                <p className="mb16 font16">老师评语</p>
                                <div className="tea-text font14">暂无</div>
                            </div>
                            <div className="right">
                                <p className="font16" style={{color: 'rgb(95, 99, 104)'}}>成绩</p>
                                <p className="font24">
                                    <span style={{color: 'rgb(255, 96, 0)'}}>{gotScore}</span>
                                    /100
                                </p>
                            </div>
                        </div>
                        <div className="annex-box">
                            <div className="title font16 mb24">
                                作业附件
                                <span className='tip font12'>1个</span>
                            </div>
                            <div className="attachment flex-between mb16">
                                <div className="flex-align file">
                                    <div className="left">
                                        <img
                                            src="	https://assets.ketangpai.com/openapiv5/Public/Common/img/fileicon/file_ext_big_xlsx.png"
                                            alt=""/>
                                    </div>
                                    <div className="right font12">
                                        <h3 className='weight400'>icd-main.xlsx</h3>
                                        <span>62.59KB</span>
                                    </div>
                                </div>
                                <a className="opt"
                                   href={'"D:\\test\\homework\\00f39eeec81245c68ebd9a8781d3c797.emmx"'}>下载</a>
                            </div>
                        </div>
                    </div>
                </div>
            </HasSubmittedWrapper>
        )

    }

    const onChange = (key: string) => {
        console.log(key);
    };


    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '详情',
            children: <Detail {...homeworkDetail}/>,
        },
        {
            key: '2',
            label: '提交作业',
            children: hasSubmitted ? <HasSubmitted {...homeworkDetail}/> : <SubmitHomework {...homeworkDetail}/>,
        },
    ];
    return (
        <Wrapper>
            <Modal title="确认提交" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <p>成功提交后，作业截至时间前且老师未批</p>
                <p>改本作业时，可随时正常更新提交的作业</p>
            </Modal>
            <StudentHomeworkDetailNav/>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange}/>
        </Wrapper>
    );
}
export default StudentHomeworkDetail;